<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>酷狗520</title>
		<link rel="stylesheet" type="text/css" href="css/swiper.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>

	<body>
		<!--酷狗520加载页-->
		<div class="toload">
			<span></span>
			<div class="xingxing">
			</div>
			<div class="load">
				<img src="images/520tupian/jiazaiye.png" />
			</div>
			<div class="huojian ani" swiper-animate-effect="bounceInLeft">
				<img src="images/520tupian/jiazaiye-huojain.png" />
			</div>
			<div class="kugo ani" swiper-animate-effect="bounceInRight">
				<img src="images/520tupian/jiazaiye-logoQg.png" />
			</div>
			<div class="erji ani" swiper-animate-effect="bounceInLeft">
				<img src="images/520tupian/jiazaiye-zsp.png" />
			</div>
			<div class="skip ani" swiper-animate-effect="bounceInLeft">
				<img src="images/520tupian/jiazaiye-tGuo.png" />
			</div>
		</div>
		<div class="index">
			<!--酷狗520首页-->
			<div class="logoye">
				<img src="images/520tupian/logo.png" />
			</div>
			<div class="light1 lg1"></div>
			<div class="light2 lg2"></div>
			<div class="light3 lg3"></div>
			<div class="light4 lg4"></div>
			<div class="light5 lg5"></div>
			<div class="light6 lg6"></div>
			<div class="middImg">
				<img src="images/520tupian/shouye-zhuti.png" />
			</div>
			<div class="mouth ani" swiper-animate-effect="fadeInRightBig">
				<img src="images/520tupian/shouye-zuiba.png" />
			</div>
			<div class="person ani">
				<img src="images/520tupian/shouye-people.png" />
			</div>
			<div class="personer stratBtn ani">
				<img src="images/520tupian/shouye-btn.png" />
			</div>
		</div>

		<!--结束页-->
		<div class="end">
			<div class="logoright">
				<img src="images/520tupian/logo.png" />
			</div>
			<div class="endleft">
				<img src="images/520tupian/jieguoye.png" />
			</div>
			<div class="medal">
				<img src="images/520tupian/qingto.png"/>
			</div>
			<div class="guess">
				<img src="images/520tupian/jieguoye2.png" />
				<p></p>
			</div>
			<div class="endCenter">
				<img src="images/520tupian/jieguoye3.png" />
				<p></p>
			</div>
			<div class="challenge">
				<img src="images/520tupian/jieguoye4.png" />
			</div>
			<div class="share">
				<img src="images/520tupian/jieguoye5.png" />
			</div>
			<div class="ranking">
				<img src="images/520tupian/jieguoye7.png" />
			</div>
			<div class="friend">
				<img src="images/520tupian/jieguoye6.png" />
			</div>
		</div>

		<!--分享页-->
		<div class="shareol">
			<img src="images/520tupian/fx.png"/>
		</div>
		<!--轮播区-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<!--酷狗520电影金曲页-->
					<div class="backgrounder ani">
						<img src="images/520tupian/dianying-zabj.png" />
					</div>
					<div class="citydr ani" swiper-animate-effect="bounceInDown">
						<img src="images/520tupian/dianying-nbdsmjza.png" />
					</div>
					<div class="cityWall">
						<img src="images/520tupian/dianying-cQiang.png" />
					</div>
					<div class="bacImg">
						<img src="images/520tupian/dianying-zixiaHz.png" />
					</div>
				</div>
				<!--酷狗520摇滚-->
				<div class="swiper-slide">
					<div class="rockandroll">
						<div class="light1 lg1"></div>
						<div class="light2 lg2"></div>
						<div class="light3 lg3"></div>
						<div class="light4 lg4"></div>
						<div class="light5 lg5"></div>
						<div class="light6 lg6"></div>
						<div class="dengguang">
							<img src="images/520tupian/caideng.png" />
						</div>
						<div class="zhujiao ani" swiper-animate-effect="bounceInDown">
							<img src="images/520tupian/yaogun-ygun.png" />
						</div>
						<div class="renqun">
							<img src="images/520tupian/yaogun-wutai.png" />
						</div>
						<div class="guanzho">
							<img src="images/520tupian/yaogun-wow-left.png" />
						</div>
						<div class="guanzhoer">
							<img src="images/520tupian/yaogun-wow-right.png" />
						</div>
					</div>
				</div>

				<!--酷狗520R&B-->
				<div class="swiper-slide">
					<div class="RBer">
						<div class="rbImg">
							<img src="images/520tupian/dianying-zabj.png" />
						</div>
						<div class="dinbuimg">
							<img src="images/520tupian/caideng.png" />
						</div>
						<div class="vehicle ani">
							<img src="images/520tupian/car.png" />
						</div>
						<div class="yaoyao ani">
							<img src="images/520tupian/car-yao01.png" />
						</div>
					</div>
				</div>

				<!--酷狗520经典歌曲页-->
				<div class="swiper-slide">
					<ul class="songer">
						<li class="songImg">
							<img src="images/520tupian/dianying-yhzq.png" />
						</li>
						<li class="dengImg">
							<img src="images/520tupian/caideng.png" />
						</li>
						<li class="floor">
							<img src="images/520tupian/jidian3.png" />
						</li>
						<li class="xiaohuozi">
							<img src="images/520tupian/jingdiange-feizao.png" />
						</li>
						<li class="dangbanone ani" swiper-animate-effect="bounceInRight">
							<img src="images/520tupian/jingdiange-right-dban.png" />
						</li>
						<li class="dahaner">
							<img src="images/520tupian/jidian1.png" />
						</li>
						<li class="dangbantwo ani" swiper-animate-effect="bounceInLeft">
							<img src="images/520tupian/jingdiange-left-dban.png" />
						</li>
					</ul>
				</div>
				<!--酷狗老歌页-->
				<div class="swiper-slide">
					<ul class="laosong">
						<li class="zhuImg ani">
							<img src="images/520tupian/dianying-zabj.png" />
						</li>
						<li class="topImg">
							<img src="images/520tupian/caideng.png" />
						</li>
						<li class="laoren ani" swiper-animate-effect="zoomIn">
							<img src="images/520tupian/laogeye-lrck.png" />
						</li>
						<li class="liushengji ani" swiper-animate-effect="zoomInDown">
							<img src="images/520tupian/laogeye--yinX.png" />
						</li>
					</ul>
				</div>
				<!--酷狗520流行曲-->
				<div class="swiper-slide">
					<ul class="popular">
						<li class="populare ani">
							<img src="images/520tupian/liuxingge-bolang.png" />
						</li>
						<li class="female ani" swiper-animate-effect="zoomInRight">
							<img src="images/520tupian/liuxingge-qaDx.png" />
						</li>
						<li class="male ani" swiper-animate-effect="rotateInDownLeft">
							<img src="images/520tupian/liuxingge-songhua.png" />
						</li>
						<li class="duihua ani" swiper-animate-effect="bounceIn">
							<img src="images/520tupian/liuxing-duihua.png" />
						</li>
						<li class="changying">
							<img src="images/520tupian/liuxingge-wenzi.png" />
						</li>
					</ul>
				</div>
			</div>
			<!--选项卡-->
			<div class="choice">
				<div class="choicebox ani" swiper-animate-effect="bounceInButtom"">
					<img src="images/520tupian/xuanxiang.png" />
				</div>
				<div class="math">
					<div class="optionone">
					</div>
					<div class="optiontwo">
					</div>
					<div class="optionthree">
					</div>
				</div>

				<div class="timeber">
					<h2><span class="clock">60</span></h2>
				</div>
				<div class="xiayisho">
					<h2>下一首</h2>
				</div>
			</div>
		</div>

		<!--播放器-->
		<audio autoplay loop></audio>
		<script src="js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/preloadjs.min.js" type="text/javascript" charset="utf-8"></script>
		
	</body>

</html>